<template>
	<view>
		<nav-bar></nav-bar>
		<u-swiper height="350" :list="imgList" keyName="image" showTitle :autoplay="false" circular></u-swiper>
		<view class="body-content">
			<view class="operate-bar">
				<view class="take-up">
					<u-icon name="car" color="#0f559f" size="100"></u-icon>
					<p class="small-title">外卖</p>
					<p class="remark-data">送货到家</p>
				</view>
				<view class="ask-for">
					<u-icon name="bag" color="#0f559f" size="100"></u-icon>
					<p class="small-title">自取</p>
					<p class="remark-data">请下单</p>
				</view>
			</view>
			<user-info class="user-info" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
				user-name="张三"></user-info>
			<u--image class="show-img" width="100%" height="300" src="https://cdn.uviewui.com/uview/album/1.jpg"
				:fade="true" duration="450"></u--image>
		</view>

	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	import userInfo from '../../components/user-info/user-info.vue'
	export default {
		components: {
			navBar,
			userInfo
		},
		name: 'home-view',
		data() {
			return {
				imgList: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}, ] // 轮播图
			};
		}
	}
</script>

<style scoped lang="scss">
	.body-content {
		padding: 0 20rpx;

		.operate-bar {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 40rpx;

			.take-up,
			.ask-for {
				width: 100rpx;
				height: 180rpx;
				padding: 40rpx 120rpx;
				border-radius: 10rpx;
				text-align: center;
				background-color: #f9f9fb;
				box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);

				.small-title {
					color: #000000;
					font-size: 28rpx;
					font-weight: bold;
				}

				.remark-data {
					color: #a0a0a2;
					font-size: 24rpx;
				}
			}
		}

		.user-info {
			padding: 20rpx;
			box-shadow: 8rpx 8rpx 20rpx rgba(0, 0, 0, 0.1);
			margin: 60rpx 0;
		}
	}

	.show-img {
		padding-bottom: 120rpx;
	}
</style>